<template>
	<div class="mui-slider">
		 <div class="mui-slider-group" :class="silderdata.length>1?'mui-slider-group mui-slider-loop':'' ">
			 <template v-for="(item,$index) in silderdata">
			 	<!--支持循环，需要重复图片节点-->
			 	<div class="mui-slider-item mui-slider-item-duplicate" v-if="$index+1==silderdata.length && silderdata.length>1">
			 		<a href="#"><img src="../../../static/banner.jpg" /></a>
			 	</div>
			 	<!--轮播图数据-->
			 	<div class="mui-slider-item">
			 		<a href="#"><img src="../../../static/banner.jpg" /></a>
			 	</div>
			 	<!--支持循环，需要重复图片节点-->
			 	<div class="mui-slider-item mui-slider-item-duplicate"  v-if="$index+1==silderdata.length && silderdata.length>1">
			 		<a href="#"><img src="../../../static/banner.jpg" /></a>
			 	</div>
			 </template>
		 </div>
		 <div class="mui-slider-indicator">
			 <template v-for="(item,$index) in silderdata">
				<div class="mui-indicator" :class="!$index?'mui-active':'' "></div>
			 </template>
		 </div>  
	</div>
</template>
<script>
	export default{
		data:function(){
			return{
				img_root:url.file_path
			}
		},
		props:['silderdata'],
		updated:function(){
			mui(".mui-slider").slider({
				interval: 3000
			});
			mui.init({
				swipeBack:true,//启用右滑关闭功能
			});
		}
	}
</script>
<style>
	.mui-slider-indicator .mui-active.mui-indicator{
		background-color: #f08800;
	}
	.mui-slider-indicator .mui-indicator{
		background: #FFFFFF;
	}
</style>